<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" />
<%-- <link href="${ctx}/css/tipso.min.css" rel="stylesheet" type="text/css" /> --%>
<style type="text/css">
  input,select {
      font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;
      font-size:18pt;
  }
  .option label{width:15%;color:#4c4c4c;float:left;padding-left:5%;text-align:left;}
</style>
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
    <a href="${ctx}/authenticode/index.do">
      <div id="main-top-left">
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">更新个人信息</div>
  </header>
  <div id="container">
      <div id="login">
        <ul>
          <li class="registered" <c:if test="${not empty loginResult.username }">style="background-color:rgb(239, 238, 238);"</c:if>><label>用户名</label><input id="username" name="username" type="text" placeholder="必填项" <c:if test="${not empty loginResult.username }">readonly="readonly"</c:if>value="${loginResult.username }"/></li>
          <li class="registered" <c:if test="${not empty loginResult.password }">style="background-color:rgb(239, 238, 238);"</c:if>><label>设置密码</label><input id="password" name="password" type="password" placeholder="必填项" <c:if test="${not empty loginResult.password }">readonly="readonly"</c:if>value="${loginResult.password }"/></li>
          <li class="registered" <c:if test="${not empty loginResult.password }">style="display:none;"</c:if>><label>确认密码</label><input id="passwordConfirm" name="passwordConfirm" type="password"  placeholder="必填项" /></li>
          <li class="option"><label>真实姓名</label><input id="fullname" name="fullname" type="text"  placeholder="选填项" value="${loginResult.fullname }"/></li>
          <li class="registered"><label>性别</label>
            <select id="gender" name="gender">
                <c:forEach var="gender" items="${genderMap}">
                  <option value="${gender.key}" <c:if test="${gender.key == loginResult.gender}">selected="selected"</c:if>>${gender.value}</option>
                </c:forEach>
            </select>
          </li>
          <li class="registered"><label>手机号码</label><input id="mobile" name="mobile" type="text" placeholder="必填项" readonly="readonly" value="${loginResult.mobile }"/></li>
          <li class="option"><label>出生日期</label><input id="birthday" name="birthday" type="date" placeholder="选填项" value="${loginResult.birthday }"/></li>
          <li class="registered"><label>证件类型</label>
            <select name="identificationType" id="identificationType">
                <c:forEach var="identification" items="${identificationMap}">
                  <option value="${identification.key}" <c:if test="${identification.key == loginResult.identificationType}">selected="selected"</c:if> >${identification.value}</option>
                </c:forEach>
            </select>
          </li>
          <li class="registered"><label>证件号码</label><input id="identificationNumber" name="identificationNumber" type="text" placeholder="必填项" value="${loginResult.identificationNumber }"/></li>
          <li class="registered"><label>乘客类型</label>
            <select id="passengerType" name="passengerType">
              <c:forEach var="passenger" items="${passengerMap}">
                <option value="${passenger.key}" <c:if test="${passenger.key == loginResult.passengerType}">selected="selected"</c:if> >${passenger.value}</option>
              </c:forEach>
            </select>
            <input name="userId" id="userId" type="hidden" value="${loginResult.userId}">
          </li>
          <li class="registered"><label>验证码</label>
            <input id="captcha" name="captcha" type="text"  placeholder="必填项"/>
            <input id="email" name="email" type="hidden" value="${loginResult.email }"/>
            <input id="country" name="country" type="hidden" value="${loginResult.country }"/>
            <input id="province" name="province" type="hidden" value="${loginResult.province }"/>
            <input id="district" name="district" type="hidden" value="${loginResult.district }"/>
            <input id="city" name="city" type="hidden" value="${loginResult.city }"/>
            <input id="address" name="address" type="hidden" value="${loginResult.address }"/>
            <input id="postcode" name="postcode" type="hidden" value="${loginResult.postcode }"/>
            <input id="identificationTypeName" name="identificationTypeName" type="hidden" value="${loginResult.identificationTypeName }"/>
            <input id="openId" name="openId" type="hidden" value="${loginResult.openId }"/>
            <input id="token" name="token" type="hidden" value="${token }"/>
          </li>
        </ul>
      </div>
  </div>
  <div id="big-button">
    <a id="regButton" href="javascript:void(0);">
      <div id="determine" style="letter-spacing:0pt;margin-bottom:25pt;">确&nbsp;定</div>
    </a>
  </div>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <!-- mergeTo:${ctx}/js/custom.min.js?ver=${custom_min_version} -->
  <script type="text/javascript" src="${ctx}/js/custom.js?ver=${custom_version}"></script>
  <!-- mergeTo -->
  <script type="text/javascript">
    // 表单参数类
    var formObj = {
            username:'',
            password:'',
            passwordConfirm:'',
            fullname:'',
            gender:'',
            mobile:'',
            birthday:'',
            passengerType:'',
            identificationType:'',
            identificationNumber:'',
            userId:'',
            captcha:'',
            email:'',
            country:'',
            province:'',
            district:'',
            city:'',
            address:'',
            postcode:'',
            identificationTypeName:'',
            openId:'',
            token:''
    }
    // 注册校验
    function verify(form) {
        var isNotBlank = (form.username != '' && form.password != '' <c:if test="${empty loginResult.password }">&& form.passwordConfirm != '' </c:if> && form.mobile != '' && form.identificationNumber != '' && form.captcha != '');
        if (isNotBlank) {
            if (/^[\u4E00-\u9FA5\uF900-\uFA2D]*$/i.test(form.username)) {
                if (form.username.length >= 2 && form.username.length <= 8) {
                } else {
                    alert("用户名请输入2-8个汉字, 4-16位字母或数字");
                    return false;
                }
            } else if (!/^\w{4,16}$/i.test(form.username)) {
                alert("用户名请输入2-8个汉字, 4-16位字母或数字");
                return false;
            }
            <c:if test="${empty loginResult.password }">
            if (form.password != form.passwordConfirm) {
                alert("设置密码和确认密码输入不一致！");
                return false;
            }
            </c:if>

            // 校验军官证
            if(form.identificationType == "${constant.officercard}"){
                if(!/^[\u4E00-\u9FA5]{1}\d{8}$/i.test(form.identificationNumber)){ 
                    alert("军官证输入有误"); 
                    return false;
                } 
            }
            // 校验身份证
            if(form.identificationType == "${constant.idcard}"){
                var checkIDCard = new clsIDCard(form.identificationNumber);
                if(!checkIDCard.IsValid()){
                    alert("身份证号码输入有误！");
                    return false;
                }
            }
            // 校验手机号
            if(!/^\d{11}$/i.test(form.mobile)){
                alert("手机号码输入有误");
                return false;
            }
            return true;
        } else {
            alert("必填项不能为空！");
            return false;
        }
    }
    $(document).ready(function() {

        // 注册按钮事件绑定
        $("#determine").bind("click", function(e) {
            formObj.username = $('#username').val();
            formObj.password = $('#password').val();
            formObj.passwordConfirm = $('#passwordConfirm').val();
            formObj.fullname = $('#fullname').val();
            formObj.gender = $('#gender').val();
            formObj.mobile = $('#mobile').val();
            formObj.birthday =$('#birthday').val();
            formObj.identificationNumber = $('#identificationNumber').val();
            formObj.identificationType = $('#identificationType').val();
            formObj.passengerType = $('#passengerType').val();
            formObj.userId = $('#userId').val();
            formObj.captcha = $('#captcha').val();
            formObj.email = $('#email').val();
            formObj.country = $('#country').val();
            formObj.province = $('#province').val();
            formObj.district = $('#district').val();
            formObj.city = $('#city').val();
            formObj.address = $('#address').val();
            formObj.postcode = $('#postcode').val();
            formObj.identificationTypeName = $('#identificationTypeName').val();
            formObj.openId = $('#openId').val();
            formObj.token = $('#token').val();
            // 验证通过，提交表单
            if(verify(formObj)) {
                $.ajax({
                    type: "POST",
                    url: "${ctx}/userinfo/update.do",
                    data:{
                    	    username:formObj.username,
                      	    fullname:formObj.fullname,
                      	    password:formObj.password,
                            gender:formObj.gender,
                            identificationType:formObj.identificationType,
                            identificationNumber:formObj.identificationNumber,
                            mobile:formObj.mobile,
                            passengerType:formObj.passengerType,
                            birthday:formObj.birthday,
                            userId:formObj.userId,
                            captcha:formObj.captcha,
                            email:formObj.email,
                            country:formObj.country,
                            province:formObj.province,
                            district:formObj.district,
                            city:formObj.city,
                            address:formObj.address,
                            postcode:formObj.postcode,
                            identificationTypeName:formObj.identificationTypeName,
                            openId:formObj.openId,
                            token:formObj.token
                          },
                    success:function(data) {
                        if (data.errcode == ${constant.errcode_success}) {
                        	alert("用户信息已更新");
                        	WeixinJSBridge.call('closeWindow');
                        } else {
                            alert(data.errmsg);
                        }
                    }
                });
            }

        });
        
        $("body").bind("keyup",function(e){
            // 前往键或者GO键的keycode
            if (e.keyCode == 13) {
                $("#determine").trigger("click");
            }
        });
    });
  </script>
</body>
</html>